<template>
  <div class="box">
    <van-nav-bar left-arrow @click-left="onClickLeft" size="30px" color="#000"/>

    <h1>取一个你喜欢的昵称吧</h1>

    <van-field v-model="username" placeholder="2-15个字" ref='name'/>
    <div style="border:0.5px solid #000"></div>
    <van-button type="primary" size="large" class="btn-l"  to="/myplce"  @click="to">下一步</van-button>
  </div>
</template>

<script>
export default {
  name: "Myname",
  data() {
    return {
      username: ""
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    to(){

      console.log(this.$refs.name.value)
      let name=this.$refs.name.value
      this.$store.commit('name',name)//name



    }



  }
};
</script>

<style scoped>
.box {
  width: 100%;
  overflow: hidden;
  padding: 160px 20px 0 20px;
  box-sizing: border-box;
  text-align: center;
}
.box h1 {
  margin: 60px 0;
}
.box .btn-l {
  position: fixed;
  bottom: 0px;
  left: 0;
}
.van-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
}
</style>
